<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #navbar {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        background: red;
        color: white;
        height: 70px;
        line-height: 70px;
      }
      li a {
        color: white;
      }
      .nav-list {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
      }
      ul.nav-list li {
        padding: 0 10px;
      }
      h1 {
        color: white;
      }
      .welcome-section {
        height: 100vh;
        background: black;
        margin-top: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .projects-section {
        height: 100vh;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: black;
      }
      .contact-section {
        height: 100vh;
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      @media (max-width: 300px) {
        #navbar {
          background: blue;
        }
      }
    </style>
  </head>
  <body>
    <nav id="navbar" class="nav">
      <ul class="nav-list">
        <li>
          <a href="#welcome-section">About</a>
        </li>
        <li>
          <a href="#projects">Work</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </nav>
    <section id="welcome-section" class="welcome-section">
      <h1>Hey I am Mimic</h1>
      <p>a web developer</p>
    </section>
    <section id="projects" class="projects-section">
      <h2 class="projects-section-header">These are some of my projects</h2>

      <div class="projects-grid">
        <a
          href="https://codepen.io/freeCodeCamp/full/KzXQgy"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Tic Tac Toe Game
            <span class="code">/&gt;</span>
          </p>
        </a>
      </div>

      <a
        href="https://codepen.io/FreeCodeCamp/"
        class="btn btn-show-all"
        target="_blank"
        >Show all<i class="fas fa-chevron-right"></i
      ></a>
    </section>
    <section id="contact" class="contact-section">
      <div class="contact-section-header">
        <h2>Let's work together...</h2>
        <p>How do you take your coffee?</p>
      </div>
      <div class="contact-links">
        <a
          href="https://facebook.com/freecodecamp"
          target="_blank"
          class="btn contact-details"
          ><i class="fab fa-facebook-square"></i> Facebook</a
        >
        <a
          id="profile-link"
          href="https://github.com/freecodecamp"
          target="_blank"
          class="btn contact-details"
          ><i class="fab fa-github"></i> GitHub</a
        >
        <a
          href="https://twitter.com/freecodecamp"
          target="_blank"
          class="btn contact-details"
          ><i class="fab fa-twitter"></i> Twitter</a
        >
        <a href="mailto:example@example.com" class="btn contact-details"
          ><i class="fas fa-at"></i> Send a mail</a
        >
        <a href="tel:555-555-5555" class="btn contact-details"
          ><i class="fas fa-mobile-alt"></i> Call me</a
        >
      </div>
    </section>
    <script
      src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
      async
    ></script>
  </body>
</html>
